<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card>
          <div style="width: 100%;height: 150px;;">

            <!--惠唐logo-->
            <div style="float: left;width: 150px;height: 150px;">
              <img src="../assets/images/logo-new.jpg" alt="Avatar" style="width: 150px;height: 150px;" />
            </div>

            <!--用户信息-->
            <div style="float: left;margin-left: 40px;">
              <div style="margin-top: 50%;">
                <p style="font-size: 30px;margin-top: -10px;margin-bottom: 5px">{{ this.userName }}</p>
                <p style="color: #909399;margin-top: 0;margin-bottom: 5px">{{ this.nickName }}</p>
                <p style="color: #909399;margin-top: 0;margin-bottom: 5px">{{ this.deptName }} / {{ this.postGroup }}</p>
              </div>
            </div>
          </div>

          <el-divider/>

          <!--登录信息-->
          <div class="login-info">
            <p>登录时间：<span>{{ this.loginDate }}</span></p>
            <p>登录IP：<span>{{ this.loginIP }}</span></p>
            <p>登录地点：<span>{{ this.loginAddress }}</span></p>
            <p>浏览器：<span>{{ this.browser }}</span></p>
            <p>操作系统：<span>{{ this.os }}</span></p>
          </div>
        </el-card>
      </el-col>


      <el-col :span="18" :xs="24">
        <el-card>
          <div class="statistics">
            <el-row>
              <el-col :span="6">
                <div class="stat-box">
                  <i class="el-icon-caret-bottom" style="margin-bottom: 5px"/>
                  <div class="stat-value">热轧2050</div>
                  <i class="el-icon-caret-top"/>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-box">
                  <i class="el-icon-document" style="margin-bottom: 5px"/>
                  <div class="stat-value">{{ this.firstInfo.total }}</div>
                  <div class="stat-label">工艺要点</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-box" style="color: #E6A23C;">
                  <i class="el-icon-warning-outline" style="margin-bottom: 5px"/>
                  <div class="stat-value">{{ this.firstInfo.notApproval }}</div>
                  <div class="stat-label">待审核</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-box" style="color: red;">
                  <i class="el-icon-circle-close" style="margin-bottom: 5px"/>
                  <div class="stat-value">{{ this.firstInfo.deactivated }}</div>
                  <div class="stat-label">已停用</div>
                </div>
              </el-col>
            </el-row>

            <el-divider/>

            <el-row>
              <el-col :span="6">
                <div class="stat-box">
                  <i class="el-icon-caret-bottom" style="margin-bottom: 5px"></i>
                  <div class="stat-value">热轧1580</div>
                  <i class="el-icon-caret-top"/>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-box">
                  <i class="el-icon-document" style="margin-bottom: 5px"/>
                  <div class="stat-value">{{ this.secondInfo.total }}</div>
                  <div class="stat-label">工艺要点</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-box" style="color: #E6A23C;">
                  <i class="el-icon-warning-outline" style="margin-bottom: 5px"/>
                  <div class="stat-value">{{ this.secondInfo.notApproval }}</div>
                  <div class="stat-label">待审核</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-box" style="color: red;">
                  <i class="el-icon-circle-close" style="margin-bottom: 5px"/>
                  <div class="stat-value">{{ this.secondInfo.deactivated }}</div>
                  <div class="stat-label">已停用</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {
  getLoginProfile,
  getUserProfile,
  get2050Info,
  get1580Info
} from "@/api/showcase/showcase_index/showcase_index";

export default {
  name: "Showcase_Index",
  data() {
    return {
      //获取用户信息
      userName: null,
      nickName: null,
      deptName: null,
      postGroup: {},

      //获取登录信息
      loginDate: null,
      loginIP: null,
      loginAddress: null,
      browser: null,
      os: null,

      //获取2050工艺要点信息
      firstInfo: [],
      //获取1580工艺要点信息
      secondInfo: [],
    };
  },

  created() {
    this.getList();
  },

  methods: {
    getList() {
      //获取用户信息
      getUserProfile().then(response => {
        this.userName = response.data.userName;
        this.nickName = response.data.nickName;
        this.deptName = response.data.dept.deptName;
        this.postGroup = response.postGroup;
      });

      //获取登录信息
      getLoginProfile().then(response => {
        // console.log(response);
        this.loginDate = response.loginTime;
        this.loginIP = response.ipaddr;
        this.loginAddress = response.loginLocation;
        this.browser = response.browser;
        this.os = response.os;
      });

      //获取2050工艺要点信息
      get2050Info().then(response => {
        this.firstInfo = response;
        // console.log(this.firstInfo);
      })
      //获取1580工艺要点信息
      get1580Info().then(response => {
        this.secondInfo = response;
        // console.log(this.secondInfo);
      })
    }
  },

};
</script>

<style scoped>
.dashboard {
  padding: 20px;
}
.login-info{
  display: flex;
  flex-direction: column;
  color: #909399;

  p{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
    margin-top: 0;
  }
  span {
    margin-left: auto;
  }
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin: 10px;
}

.stat-value {
  font-size: 24px;
  margin-bottom: 5px;
}
</style>

